import { useState, useEffect } from 'react'
import Header from '@/layout/Header/Header'
import CategorySelect from '@/components/CategorySelect/CategorySelect'
import CreateStu from './components/CreateStu'
import EditStu from './components/EditStu'
import DeleteStu from './components/DeleteStu'
import Details from './components/Details'
import {  Card, Table, Space } from 'antd'
import { reqGetStuInfo } from '@/api'
import './index.less'

interface IStuInfo {
  stuName: string,
  stuID: number,
  stuPwd: string,
  stuAccount: string,
  school: string,
  stuClass: string,
  address: string,
  phone: number,
  time: string
}

function Index() {
  // table数据部分
  const [stuInfo, setStuInfo] = useState<IStuInfo[]>([])  
  // useEffect依赖
  const [flag, setFlag] = useState(false)

  // 获取列表数据
  const getStuInfo = () => {
    reqGetStuInfo().then(res => {
      const {code,data} = res.data
      if(code === 200) {
        setStuInfo(data)
      }
    })
  }

  // 请求列表数据
  useEffect(() => {
    getStuInfo()
  },[flag]);

  // 通过查询更新列表数据
  const getUpdateInfo = (data:any) => {
    setStuInfo(data)
  }

  // 通过子组件事件改变依赖
  const handleFlag = () => {
    setFlag(!flag)
  }
  
  return (
    <div>
      <Header />
      <CategorySelect searchInfo = {stuInfo}  getUpdateInfo = {getUpdateInfo} />
      <div className='stuList' >
        <Card extra = { <CreateStu handleFlag = {handleFlag}/> }>
          <Table dataSource={stuInfo} rowKey={'key'}>
            <Table.Column title={'学生姓名'} dataIndex={'stuName'}/>
            <Table.Column title={'学号'} dataIndex={'stuID'}/>
            <Table.Column title={'所属学校'} dataIndex={'school'}/>
            <Table.Column title={'所在班级'} dataIndex={'stuClass'}/>
            <Table.Column title={'创建时间'} dataIndex={'time'}/>
            <Table.Column title={'操作'} align={'center'} 
              render = {(stuInfo:IStuInfo) => (
                <div className='operation'>
                  <Space size={'large'}>
                    <EditStu editInfo = {stuInfo} handleFlag={handleFlag}/>|
                    <DeleteStu stuID = {stuInfo.stuID} handleFlag={handleFlag}/>|
                    <Details detailsInfo = {stuInfo} />
                  </Space>
                </div>
              )}/>
          </Table>
        </Card>
      </div>
    </div>
  )
}

export default Index